<template>
  <el-dialog v-model="dialogVisible" title="主题配色" width="550px" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false" center align-center destroy-on-close>
    <ul class="theme-list">
      <li v-for="(item, index) in themeColors" :key="index" class="theme-item">
        <div :style="{ backgroundColor: item.color }" class="theme-item-color" @click="currentTheme = item.color">
          <el-icon v-if="currentTheme === item.color" color="#999" size="30px"><i-ep-CircleCheck /></el-icon>
        </div>
        <p class="theme-item-name">{{ item.name }}</p>
      </li>
    </ul>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="onCancel">取消</el-button>
        <el-button type="primary" @click="onConfirm">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
/**
 * 主题配色修改组件
 */
import { ref, watch } from "vue";
import { useVModel } from "@vueuse/core";

interface Props {
  visible: boolean;
}
const props = withDefaults(defineProps<Props>(), {
  visible: false
});
const emit = defineEmits(["update:visible"]);
const dialogVisible = useVModel(props, "visible", emit);

// 主题配色列表
const themeColors = [
  {
    name: "默认",
    color: "#ffffff"
  },
  {
    name: "暗黑",
    color: "#1D1D1D"
  },
  //   {
  //     name: "深蓝",
  //     color: "#202C36"
  //   },
  {
    name: "深灰蓝",
    color: "#132c33"
  },
  {
    name: "深海绿",
    color: "#1a3b32"
  },
  {
    name: "淡翠绿",
    color: "#C7EDCC"
  },
  {
    name: "荷叶绿",
    color: "#207f4c"
  },
  {
    name: "极光灰",
    color: "#EAEAEF"
  },
  {
    name: "杏仁黄",
    color: "#f7e8aa"
  },
  {
    name: "秋叶褐",
    color: "#FFF2E2"
  },
  {
    name: "海天蓝",
    color: "#c6e6e8"
  }
];

const currentTheme = ref(""); // 当前选中的主题色

const onCancel = () => {
  dialogVisible.value = false;
};

const onConfirm = () => {};
</script>

<style lang="scss" scoped>
.theme {
  &-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  &-item {
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    margin-bottom: 10px;
    &-color {
      width: 80px;
      height: 80px;
      margin-bottom: 10px;
      cursor: pointer;
      border-radius: 6px;
      border: 1px solid var(--el-border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      &:hover {
        box-shadow: var(--el-box-shadow);
      }
    }
    &-name {
      font-weight: bold;
      font-size: 16px;
    }
  }
}
</style>
